<template>
  <div style="height: 100%">
    <template v-if="records && records.length > 0">
      <el-timeline>
        <el-timeline-item
          v-for="(record, index) in records"
          :key="index"
          :icon="record.icon"
          :type="record.type"
          :color="color(record.operationMethod)"
          :size="record.size"
        >
          <el-link :underline="false" type="primary">{{ record.createdBy }}</el-link>
          <el-link class="ml10" :underline="false" type="info">{{
            $t('operationMethod[' + record.operationMethod + ']')
          }}</el-link>
          <el-link :underline="false" type="info" class="pull-right" icon="iconfont iconshijian">{{
            record.createdAt
          }}</el-link>
          <template v-if="record.operationMethod === 1">
            <el-row class="mt8">
              <el-col :span="12"
                ><span class="item-label">{{ $t('label.indate2') }}</span
                ><span class="item-text">{{ indate(record.indate) }}</span></el-col
              >
              <el-col :span="12"
                ><span class="item-label">{{ $t('label.version2') }}</span
                ><span class="item-text">{{ record.version }}</span></el-col
              >
            </el-row>
            <el-row>
              <el-col :span="12"
                ><span class="item-label">{{ $t('label.publishTo2') }}</span
                ><span class="item-text">{{ publishTo(record.publishTo) }}</span>
              </el-col>
            </el-row>
          </template>
        </el-timeline-item>
      </el-timeline>
    </template>
    <el-empty v-else :description="$t('error.noPublishRecord')"></el-empty>
  </div>
</template>

<script>
import { getPublishRecords } from '../../api/api';
export default {
  name: 'publishRecords',
  props: {
    formdata: {
      type: Object,
      default: () => {}
    },
    updateTime: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      records: []
    };
  },
  watch: {
    updateTime(val) {
      this.getPublishRecords();
    }
  },
  methods: {
    indate(date) {
      let result = date === '' ? this.$t('placeholder.indate') : date;
      return result;
    },
    color(operationMethod) {
      let color = '';
      if (operationMethod === 2) {
        color = '#F56C6C';
      } else if (operationMethod === 1) {
        color = '#67C23A';
      }
      return color;
    },
    publishTo(obj) {
      let result = obj === '0' ? this.$t('publishType[1]') : obj;
      return result;
    },
    getPublishRecords() {
      getPublishRecords({ id: this.formdata.id }).then(res => {
        console.info('发布记录', res.data);
        this.records = res.data || [];
      });
    }
  },
  mounted() {
    if (this.records.length === 0) {
      this.getPublishRecords();
    }
  }
};
</script>

<style lang="scss" scoped>
.el-empty {
  width: 100%;
}
.el-col {
  padding: 8px 0;
}
.ml10 {
  margin-left: 10px;
}
.mt8 {
  margin-top: 8px;
}
.dashedBorderBottom {
  border-bottom: 1px dashed #ebeef5;
}
.item-label {
  color: #909399;
}
.item-text {
  padding-left: 10px;
}
.pull-right {
  float: right;
}
::v-deep .el-link > i {
  margin-right: 5px;
}
</style>
